var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
})

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            {text: '学习使我快乐'},
            {text: '我一定会是最厉害的'},
            {text: '我是最厉害的'}
        ]
    }
})

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'data 里面 是 message ： '
    },
    methods: {
        OnClick: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

Vue.component('todo-item', {
    template: '<li>告诉你：我是一个组件</li>'
})

Vue.component('a-item', {
    props: ['todo'],
    template: '<li>{{todo.text}}</li>'
})

new Vue({
    el: '#app-7'
})

new Vue({
    el: '#app-item',
    data: {
        testlist: [
            {id: 0, text: '蔬菜'},
            {id: 1, text: '苹果'},
            {id: 2, text: '蛋糕'}
        ]
    }
})